<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高手班简章</title>
    <style>
        .container{/*设置全局的样式,不习惯修饰body，直接修饰div*/
            width: 400px;
            font-size: 15px;
        }
        .title{
            text-align: center;/*文字横向居中*/
            color: red;/*字体颜色*/
            font-size: 20px;
            font-weight: bold;/*加粗*/
        }
        .subtitle{
            text-align: center;/*文字横向居中*/
            font-size: 18px;
            font-weight: bold;
            padding: 5px 0px 5px 0px;/*控制上下为5px   左右为0px*/
        }
        .content1{
            background-color: dodgerblue;/*背景颜色为蓝色*/
            color: white;/*字体颜色*/
            /* margin-bottom: 5px;
            margin-top: 5px; */
            margin: 5px auto;
            line-height: 27px;/*线高  有纵向居中的效果*/
        }
        .content2{
            background-color: red;
            color: white;
            line-height: 27px;
        }
        .number{
            background-color: black;
            width: 20px;
            margin-left: 5px;
            display: inline-table;/*展现，以表格形式来布局，上下都顶天*/
            text-align: center;
        }
    </style>
</head>
<body>
    <div> 
    <div class="title">
        高手班（升职加薪利器）
    </div>
    <div class="subtitle">
        第一部分:基础知识进阶（齐雷）
    </div>
    <div class="content1">
        <span class="number">1</span>新接口规范、Lambda表达式、STREAM流，新日期
    </div>
    <div class="content2">
       <span class="number"> 2</span>多线程、并发安全、锁优化、高级集合、JUC并发
    </div>
    <div class="content1">
        <span class="number">3</span>nio原理分析、RPC设计以及框架中NIO的应用实现
    </div>
    <div class="content2">
        <span class="number">4</span>手写类加载器，JVM调优、GC算法及优化
    </div>
</div>
</body>
</html>